/*
 * @Author: fanjs
 * @Date: 2025-03-18 16:44:36
 * @Description:
 */
import React, { useState, useEffect } from 'react';
import {
  Navbar,
  NavbarBrand,
  Link,
  Button,
  NavbarContent,
  Popover,
  PopoverTrigger,
  PopoverContent,
  NavbarItem,
  NavbarMenuToggle,
  NavbarMenu,
  NavbarMenuItem,
  addToast
} from '@heroui/react';
import AccountCard from './AccountCard'
import { useLocation, useNavigate } from 'react-router-dom';
import { SvgIcon } from '@/components/SvgIcon'
import { ThemeSwitcher } from '@/components/SwitchTheme'
import { localStg } from '@/utils/storage';

const menuItems = [
  {
    key: '/',
    label: '首页'
  },
  {
    key: '/distribute',
    label: '数据分发'
  },
  {
    key: '/company',
    label: '公司简介'
  }
];

const AcmeLogo = () => {
  return (
    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
      <path
        clipRule="evenodd"
        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
        fill="currentColor"
        fillRule="evenodd"
      />
    </svg>
  );
};

const CustomNavbar: React.FC = () => {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  const navigate = useNavigate();
  const location = useLocation();

  const [user, setUser] = useState<any>();

  useEffect(() => {
    try {
      const user = localStg?.get('user');
      if (user) setUser(user);
      else navigate('/login', { replace: true });
    } catch {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  const handleMenuClick = () => {
    // navigate(key);
    addToast({ title: '暂未开放' })
    setIsMenuOpen(false);
  };

  const logout = () => {
    localStg.remove('token');
    localStg.remove('user');
    localStg.remove('email_id');
    localStg.remove('email_sender');
    navigate('/login', { replace: true })
  };

  return (
    <Navbar maxWidth="full" isBlurred isBordered height={56}>
      <NavbarContent justify="start">
        <NavbarBrand className='-ml-3'>
          <AcmeLogo />
          <p onClick={() => navigate('/distribute')} className="cursor-pointer font-bold text-lg">Taste-Life</p>
        </NavbarBrand>
      </NavbarContent>

      <NavbarContent justify="end" className='gap-2 -mr-2'>
        <NavbarItem >
          <ThemeSwitcher isIcon={true}></ThemeSwitcher>
        </NavbarItem>
        <NavbarItem className="hidden sm:flex">
          <Popover showArrow placement="bottom">
            <PopoverTrigger>
              <Button as={Link} color="secondary" isIconOnly variant="flat">
                {/* <SvgIcon icon="line-md:logout" className='text-md' /> */}
                <SvgIcon icon="line-md:check-all" className="text-lg pointer-events-none flex-shrink-0" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="p-1">
              <AccountCard account={user?.phone} nickname={user?.nickname}></AccountCard>
            </PopoverContent>
          </Popover>
        </NavbarItem>
        <NavbarMenuToggle
          aria-label={isMenuOpen ? "关闭菜单" : "打开菜单"}
          className="sm:hidden text-secondary"
          onClick={() => setIsMenuOpen(!isMenuOpen)}
        />
      </NavbarContent>

      <NavbarMenu>
        {menuItems.map((item) => (
          <NavbarMenuItem
            className='font-semibold text-sm h-10 flex items-center border-b border-b-default-200 pb-2 mt-2'
            key={item.key}
            isActive={location.pathname === item.key}
            onClick={() => handleMenuClick()}
          >
            {item.label}
          </NavbarMenuItem>
        ))}
        <Button onPress={logout} variant="shadow" className='mt-20' color="primary">
          <SvgIcon icon="line-md:logout" className='text-lg' />
          退出登录
        </Button>
      </NavbarMenu>
    </Navbar>
  );
};

export default CustomNavbar;